<template>
  <div class="check-group">
    <el-checkbox-group v-model="arr" @change="onChange" v-bind="$attrs">
      <el-checkbox
        v-for="item in options"
        :key="item.value"
        :label="item.value"
        >{{ item.label }}</el-checkbox
      >
    </el-checkbox-group>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import vModelMixins from "../../mixins/vModelMixins";

export default {
  name: "check-group",
  mixins: [vModelMixins],
  props: {
    type: {
      type: String
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      options: [],
      arr: []
    };
  },
  computed: {
    ...mapGetters({
      // shop: "user/shop" // 店铺信息
    })
  },
  watch: {
    form(val) {
      this.arr = val;
    }
  },
  methods: {
    async onChange(val) {
      this.form = val;
      await this.$nextTick();
      this.$emit("change");
    },
    // eslint-disable-next-line no-underscore-dangle
    async _initData() {
      let data = [];
      // const params = {
      //   data: {
      //     shopId: this.shop.value
      //   }
      // }
      switch (this.type) {
        case "roles": // 职位列表
          // data = await Api.DropDown.createUserRoleList(data);
          break;

        default:
          // 根据传入的list 渲染selector
          data = this.list;
          break;
      }
      this.options = data.map(i => ({
        label: i.label,
        value: i.value
      }));
    }
  },
  created() {
    // eslint-disable-next-line no-underscore-dangle
    this._initData();
  }
};
</script>
